<template>
	<!-- 总容器 -->
	<div class="wrapper">
	  <!-- header部分 -->
	  <header>
		<p>个人信息</p>
	  </header>
	  
	  <!-- 用户信息部分 -->
	  <div class="user-info" v-if="user && user.userName">
		<img :src="user.userImg" @error="setDefaultImage" />
		<p>{{ user.userName }}</p>
		<i class="fa fa-edit" @click="toUpdateUserName"></i>
	  </div>
  
	  <!-- 如果用户数据未加载，显示加载提示 -->
	  <div v-else>
		<p>加载中...</p>
	  </div>
  
	  <!-- 修改用户密码部分 -->
	  <ul class="settings-button">
		<li @click="toUpdateUserPassword">
		  <button><i class="fa fa-lock"></i> 修改密码</button>
		</li>
		<li @click="toUserAddress">
		  <button><i class="fa fa-map-marker"></i> 我的地址</button>
		</li>
		<li @click="toLogin">
		  <button><i class="fa fa-info"></i> 退出登录</button>
		</li>
	  </ul>
  
	  <!-- 余额部分 -->
	  <Wallet />
	  
	  <ul class="block">
		<p>
			&nbsp;
		</p>  
	  </ul>

	  <!-- 底部菜单部分 -->
	  <Footer />
	</div>
  </template>
  
  <script>
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router'; // 导入 useRouter
  import defaultImage from '../assets/profile_photo.png';
  import Footer from '../components/Footer.vue';
  import Wallet from './Wallet.vue';
  import { getSessionStorage, removeSessionStorage } from '../common.js';
  
  export default {
	name: 'Profile',
	components: {
	  Footer,
	  Wallet
	},
	setup() {
	  const user = ref(null);
	  const router = useRouter(); // 使用 useRouter 钩子函数
	  const defaultImg = defaultImage;
  
	  // 加载用户信息
	  onMounted(() => {
		try {
		  const storedUser = getSessionStorage('user');
		  if (storedUser) {
			user.value = storedUser;
		  }
		} catch (error) {
		  console.error('Error loading user data:', error);
		}
	  });
  
	  // 设置默认头像
	  const setDefaultImage = (e) => {
		e.target.src = defaultImg;
	  };
  
	  // 导航方法
	  const toUpdateUserName = () => {
		router.push({ path: '/updateUserName' });
	  };
  
	  const toUpdateUserPassword = () => {
		router.push({ path: '/updateUserPassword' });
	  };
  
	  const toUserAddress = () => {
		router.push({ path: '/userAddress' });
	  };
  
	  const toLogin = () => {
		removeSessionStorage('user');
		router.push({ path: '/choselogin' });
	  };
  
	  return {
		user,
		setDefaultImage,
		toUpdateUserName,
		toUpdateUserPassword,
		toUserAddress,
		toLogin
	  };
	}
  };
  </script>
  
  <style scoped>
  /****************** 总容器 ******************/
  .wrapper {
	width: 100%;
	height: 100%;
  }
  
  /****************** header ******************/
  .wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097ff;
	color: #fff;
	font-size: 4.8vw;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
  }
  
  /****************** 用户信息部分 ******************/
  .wrapper .user-info {
	width: 100%;
	box-sizing: border-box;
	padding: 19vw 6vw 6vw;
	display: flex;
	align-items: center;
	border-bottom: solid 1.5px #ddd;
  }
  
  .wrapper .user-info img {
	width: 25vw;
	height: 25vw;
	border-radius: 5vw;
  }
  
  .wrapper .user-info p {
	font-size: 4vw;
	margin-right: 3vw;
	margin-left: 3vw;
  }
  
  .wrapper .user-info .fa-edit {
	font-size: 4vw;
	cursor: pointer;
	user-select: none;
  }
  
  /********* 设置按钮部分 *********/
  .wrapper .settings-button {
	width: 100%;
	box-sizing: border-box;
	padding: 8vw 10vw 0;
  }
  
  .wrapper .settings-button li {
	margin-bottom: 3vw;
  }
  
  .wrapper .settings-button li button {
	width: 100%;
	height: 10vw;
	background-color: white;
	border: none;
	outline: none;
	border-radius: 4vw;
	border: solid 1.5px #ddd;
	font-size: 3.5vw;
	color: dimgray;
	cursor: pointer;
	display: flex;
	align-items: center;
  }
  
  .wrapper .settings-button li button i {
	margin: 0 3vw;
  }
  
  .wrapper .block {
	padding-bottom: 10vw;
  }
  </style>
  